<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Freetie, Dynamic Badges Generator</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
	<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
	<link rel="stylesheet" href="stylesheets/style.css">

    <!-- Le fav and touch icons -->

<style type="text/css">
div#recaptcha_image > img{
height:46px;
width:220px;
}
</style>

<script type= "text/javascript">
    var RecaptchaOptions = {
        theme: 'custom',
        custom_theme_widget: 'recaptcha_widget'
    };
</script>

  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">freetie</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <form action="/login" class="pull-right" method="post">
            <input name="username" id="username" class="input-small" type="text" placeholder="Username">
            <input name="password" id="password" class="input-small" type="password" placeholder="Password">
            <button class="btn" type="submit">Sign in</button>
          </form>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
          <h1>frettie <small>Dynamic Badges Generator</small></h1>
        </div>
        <div class="row">
          <div class="span9">
            <h2>{{ message }}</h2>
          </div>
          <div class="span5">
            <h2>Sign Up</h2>
            <br>
            <form action="/signup" class="form-stacked" method="post">
                 <div class="clearfix">
                    <label for="user">Username:</label>
                    <div class="input">
                        <input name="user" id="user" class="span4"  type="text" placeholder="Username">
                    </div>

                    <label for="pass">Password:</label>
                    <div class="input">
                        <input name="pass" id="pass" class="span4" type="password" placeholder="Password">
                    </div>

                    <label for="email">E-mail:</label>
                    <div class="input">
                        <input name="email" id="email" class="span4" type="text" placeholder="E-mail">
                    </div>

                    <br/>

                     <div id="recaptcha_widget" style="display:none">
                         <div id="recaptcha_image"></div>
                         <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

                        <span class="recaptcha_only_if_image">Enter the words above:</span>
                        <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

                        <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
                        <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
                        <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

                        <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
                    </div>

                        <script type="text/javascript"
                             src="http://www.google.com/recaptcha/api/challenge?k=6Ledu8oSAAAAABWOyPx-EIMurjtp5ps6owRlJ00u">
                        </script>
                        <noscript>
                            <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
                                height="300" width="500" frameborder="0">
                            </iframe><br/>
                            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                            <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                        </noscript>

                    <br/></br>
                    <div>
                        <button class="btn primary" type="submit">Sign Up</button>
                    </div>
                </div>
          </form>
          </div>
        </div>
      </div>

      <footer>
        <p>&copy; KuaK Team 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
